<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="checkbox"  id='xuanquan'/> 全选
		<input type="checkbox"  id='fanxuan'/>  反选
		
		<hr color="red" />
		<br/>
		
		
		<input type="checkbox" name="hobby" value="mj" /> 麻将
		
		<!-- checked checked='checked'-->
		<input type="checkbox" name="hobby" value="ddz" checked /> 斗地主
		<input type="checkbox" name="hobby" value="cg" /> 唱歌
		
		<br/>
		
		
		<script>
			
			//讲解 事件   onload  dom的操作  匿名函数  匿名方法
			
			window.onload=function(){
				
				var xuanquan = document.getElementById('xuanquan');
				var hobbys = document.getElementsByName('hobby');
				//动态绑定事件... 推荐使用  
				//如果没有打勾 点击 全部打勾  
				//如果打勾        点击  全部不打勾
				xuanquan.onclick=function(){
					
					//1 判断 全选这个复选框有没有打勾
					var b = xuanquan.checked;
					
					console.log(hobbys.length);
					for(var index =0; index<hobbys.length;index++){
						//先拿到里面的具体的1个元素
						var h = hobbys[index];
						if(b){
							h.checked=true;
						}else{
							h.checked=false;
						}
					}
				}
				
				
				document.getElementById('fanxuan').onclick=function(){
					
					for(var index in hobbys){
						var v =hobbys[index];
						
						v.checked?v.checked=false:v.checked=true;
					}
					
				}
				
				
				
			}
			
			
			
		</script>
		
		
	</body>
</html>
